<template>
	<div class="warn-setting">
		<Notice></Notice>
		<u-navbar :is-back="true">
			<view class="navbar-slot flex">
				<u-tabs :list="tabs" :is-scroll="false" :current="tabCurrent" @change="change"></u-tabs>
			</view>
		</u-navbar>
		<!-- 预警方式 -->
		<div class="content content-1" v-show="tabCurrent==0">
			<div class="toggle-row flex">
				<span class="label">弹框预警</span>
				<u-switch v-model="toggle" size="36"></u-switch>
			</div>
			<div class="wx flex">
				<span class="label">微信绑定列表</span>
				<i class="icon" @click="isQrCode=true"></i>
			</div>
			<u-modal v-model="isQrCode" title="" :show-confirm-button="false" :mask-close-able="true">
				<u-image width="600" height="600" :src="qrCodeImg"></u-image>
				<div class="wx-tip">
					使用微信扫描二维码<br>
					立享推送服务
				</div>
			</u-modal>
		</div>
		<!-- 预警类型 -->
		<div class="content content-2" v-show="tabCurrent==1">
			<div class="toggle-row flex">
				<span class="label">人工预警</span>
				<span class="value">未开启</span>
			</div>
			<div class="toggle-row flex">
				<span class="label">榜单预警</span>
				<u-switch v-model="params.rank" size="36"></u-switch>
			</div>
			<div v-if="params.rank">
				<div class="block">
					<div class="title">上榜关键词一<span class="red">*</span></div>
					<div class="box" @click="toInputPage('上榜关键词一')">
						<div class="tags" v-if="params.rank_word_1.length>0">
							<u-tag class="tag" :text="item" mode="plain" v-for="(item, index) in params.rank_word_1" :key="index" />
						</div>
						<div class="tip" v-else>请输入</div>
					</div>
				</div>
				<div class="block">
					<div class="title">上榜关键词二<span class="red">*</span></div>
					<div class="box" @click="toInputPage('上榜关键词二')">
						<div class="tags" v-if="params.rank_word_2.length>0">
							<u-tag class="tag" :text="item" mode="plain" v-for="(item, index) in params.rank_word_2" :key="index" />
						</div>
						<div class="tip" v-else>请输入</div>
					</div>
				</div>
				<div class="block">
					<div class="title">上榜关键词三<span class="red">*</span></div>
					<div class="box" @click="toInputPage('上榜关键词三')">
						<div class="tags" v-if="params.rank_word_3.length>0">
							<u-tag class="tag" :text="item" mode="plain" v-for="(item, index) in params.rank_word_3" :key="index" />
						</div>
						<div class="tip" v-else>请输入</div>
					</div>
				</div>
			</div>
			<div class="toggle-row flex">
				<span class="label">预测热点预警</span>
				<u-switch v-model="params.hotspots" size="36"></u-switch>
			</div>
			<div v-if="params.hotspots">
				<div class="block">
					<div class="title">预测热点关键词一<span class="red">*</span></div>
					<div class="box" @click="toInputPage('预测热点关键词一')">
						<div class="tags" v-if="params.hot_word_1.length>0">
							<u-tag class="tag" :text="item" mode="plain" v-for="(item, index) in params.hot_word_1" :key="index" />
						</div>
						<div class="tip" v-else>请输入</div>
					</div>
				</div>
				<div class="block">
					<div class="title">预测热点关键词二<span class="red">*</span></div>
					<div class="box" @click="toInputPage('预测热点关键词二')">
						<div class="tags" v-if="params.hot_word_2.length>0">
							<u-tag class="tag" :text="item" mode="plain" v-for="(item, index) in params.hot_word_2" :key="index" />
						</div>
						<div class="tip" v-else>请输入</div>
					</div>
				</div>
				<div class="block">
					<div class="title">预测热点关键词三<span class="red">*</span></div>
					<div class="box" @click="toInputPage('预测热点关键词三')">
						<div class="tags" v-if="params.hot_word_3.length>0">
							<u-tag class="tag" :text="item" mode="plain" v-for="(item, index) in params.hot_word_3" :key="index" />
						</div>
						<div class="tip" v-else>请输入</div>
					</div>
				</div>
			</div>
			<div class="toggle-row flex">
				<span class="label">公共预警</span>
				<u-switch v-model="params.warn" size="36"></u-switch>
			</div>
			<div class="radio-row flex" v-if="params.warn">
				<span class="radio" :class="params.warn_type==2 && 'on'" @click="params.warn_type=2">全部</span>
				<span class="radio" :class="params.warn_type==1 && 'on'" @click="params.warn_type=1">负面</span>
			</div>
			<div class="toggle-row flex">
				<span class="label">自定义预警</span>
				<u-switch v-model="diyWarn" size="36"></u-switch>
			</div>
			<div class="subjects" v-if="diyWarn">
				<div class="subjects-type">已开启专题</div>
				<div class="subject-list flex" v-if="!!open_subjects.length">
					<span class="subject flex" v-for="(item, index) in open_subjects" :key="index" @click="subjectEdit(item.id)">
						{{ item.title }}
						<u-icon name="edit-pen" size="32" color="#999"></u-icon>
					</span>
				</div>
				<div class="subjects-type">未开启专题</div>
				<div class="subject-list flex" v-if="!!close_subjects.length">
					<span class="subject flex" v-for="(item, index) in close_subjects" :key="index" @click="subjectEdit(item.id)">
						{{ item.title }}
						<u-icon name="edit-pen" size="32" color="#999"></u-icon>
					</span>
				</div>
			</div>
		</div>
		<!-- 预警分级 -->
		<div class="content content-3" v-show="tabCurrent==2">
			<div class="toggle-row flex">
				<span class="label">预警信息分级</span>
				<u-switch v-model="params.level_status" size="36"></u-switch>
			</div>
			<div class="tip">选择预警分级指标并设置数据阈值，预警信息在48小时内达到任一指标阈值则将触发对应级别预警！</div>
			<div class="check-box">
				<div class="check-row flex">
					<div class="l"><u-checkbox v-model="checked">全选</u-checkbox></div>
				</div>

				<div v-for="(item, index) in warningLevel" :key="index">
					<div class="check-row flex">
						<div class="l"><u-checkbox v-model="item.is_select">{{ item.title }}</u-checkbox></div>
						<div class="r" v-if="index<2">重大</div>
						<div class="r" v-else @click="item.is_toggle = !item.is_toggle">
							<u-icon name="arrow-down" v-if="!item.is_toggle" color="#666" size="28"></u-icon>
							<u-icon name="arrow-up" v-else color="#666" size="28"></u-icon>
						</div>
					</div>
					<div class="check-con" v-if="index>1 && item.is_toggle">
						<div class="check-con-row flex">
							<span class="l">重大</span>
							<span class="r flex">≥<u-input v-model="item.major_warning" type="number" height="60" input-align="right" :border="true" class="input" :clearable="false" placeholder="" />{{ index==2?"万粉":"个" }}</span>
						</div>
						<div class="check-con-row flex">
							<span class="l">严重</span>
							<span class="r flex">≥<u-input v-model="item.serious_warning" type="number" height="60" input-align="right" :border="true" class="input" :clearable="false" placeholder="" />{{ index==2?"万粉":"个" }}</span>
						</div>
						<div class="check-con-row flex">
							<span class="l">一般</span>
							<span class="r flex">&lt;{{ item.general_warning }}{{ index==2?"万粉":"个" }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="btns flex">
			<div class="l flex" @click="isDes=true">
				<u-icon name="question-circle" size="32" color="#999"></u-icon>
				说明
			</div>
			<div class="r flex">
				<u-button class="btn" v-if="tabCurrent==2" @click="reset">恢复默认</u-button>
				<u-button class="btn" type="primary" :loading="loading" @click="save">保存</u-button>
			</div>
		</div>
		<wordInput v-if="isInputPage" :flag="kwType" @sendKeyWords="getWordData"></wordInput>
		<subjectWarn ref="subjectWarn" :id="subjectId"></subjectWarn>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import wordInput from "@/components/wordInput.vue";
import subjectWarn from "@/components/subjectWarn.vue";
import {
	qrCode, userList, warnEdit, warnConfig, warnSubjects
} from "@/api/warn.js";

export default {
	components: {
		wordInput, subjectWarn
	},
	data() {
		return {
			tabs: [
				{
					name: "预警方式"
				},
				{
					name: "预警类型"
				},
				{
					name: "预警分级",
				}
			],
			tabCurrent: 0,
			isDes: false,
			toggle: true,
			isQrCode: false,
			qrCodeImg: "",
			params: {
				rank: false,
				rank_word_1: [],
				rank_word_2: [],
				rank_word_3: [],
				rank_range: 0,
				hotspots: false,
				hot_word_1: [],
				hot_word_2: [],
				hot_word_3: [],
				warn: true,
				warn_type: 1,
				subjects_run: [],
				level_status: true,
				level: []
			},
			warningLevel: [
				{
					is_select: true,
					is_toggle: false,
					title: "央级媒体发布",
					alert_key: "top_public",
					major_warning: 1,
					serious_warning: "",
					general_warning: ""
				},
				{
					is_select: true,
					is_toggle: false,
					title: "热榜上榜",
					alert_key: "hot_rank",
					major_warning: 1,
					serious_warning: "",
					general_warning: ""
				},
				{
					is_select: true,
					is_toggle: false,
					title: "自媒体大V发布",
					alert_key: "self_media",
					major_warning: 100,
					serious_warning: 20,
					general_warning: 20
				},
				{
					is_select: false,
					is_toggle: false,
					title: "阅读量",
					alert_key: "read_count",
					major_warning: 30000,
					serious_warning: 10000,
					general_warning: 10000
				},
				{
					is_select: false,
					is_toggle: false,
					title: "评论量",
					alert_key: "comment_count",
					major_warning: 5000,
					serious_warning: 1000,
					general_warning: 1000
				},
				{
					is_select: false,
					is_toggle: false,
					title: "转发量",
					alert_key: "repost_count",
					major_warning: 5000,
					serious_warning: 1000,
					general_warning: 1000
				},
				{
					is_select: false,
					is_toggle: false,
					title: "点赞量",
					alert_key: "like_count",
					major_warning: 5000,
					serious_warning: 1000,
					general_warning: 1000
				},
				{
					is_select: false,
					is_toggle: false,
					title: "全网相似信息数",
					alert_key: "similar_count",
					major_warning: 2000,
					serious_warning: 1000,
					general_warning: 1000
				}
			],
			diyWarn: false,
			checked: true,
			kwType: "",
			loading: false,
			open_subjects: [],
			close_subjects: [],
			subjectId: 0,
		};
	},
	computed: {
		isInputPage() {
			return this.$store.state.isInputPageInAdd;
		},
	},
	created() {
		qrCode().then(res=>{
			this.qrCodeImg = res.data.data;
		});
		userList().then();
		warnConfig().then(({data})=>{
			if(data.id){
				let tmp = data;
				Object.keys(tmp).map(key=>{
				if(tmp[key] === "t"){
					tmp[key] = true;
				}else if(data[key] === "f"){
					tmp[key] = false;
				}
			});
				this.params = data;
			}
		});
		this.getSubjects();
	},
	methods: {
		change(val) {
			this.tabCurrent = val;
		},
		getSubjects() {
			warnSubjects().then(({data})=>{
				this.open_subjects = data.open;
				this.close_subjects = data.close;
				if(!!data.open.length) this.diyWarn = true;
			});
		},
		toInputPage(type) {
			this.kwType = type;
			switch(type){
				case "上榜关键词一": 
					this.$store.commit("inputPageWordHandle", this.params.rank_word_1.map(item=>{
							return {
								label: item,
								check: false
							}
						})
					);
					break;
				case "上榜关键词二": 
					this.$store.commit("inputPageWordHandle", this.params.rank_word_2.map(item=>{
							return {
								label: item,
								check: false
							}
						})
					);
					break;
				case "上榜关键词三":
					this.$store.commit("inputPageWordHandle", this.params.rank_word_3.map(item=>{
							return {
								label: item,
								check: false
							}
						})
					);
					break;
				case "预测热点关键词一":
					this.$store.commit("inputPageWordHandle", this.params.hot_word_1.map(item=>{
							return {
								label: item,
								check: false
							}
						})
					);
					break;
				case "预测热点关键词二":
					this.$store.commit("inputPageWordHandle", this.params.hot_word_2.map(item=>{
							return {
								label: item,
								check: false
							}
						})
					);
					break;
				case "预测热点关键词三":
					this.$store.commit("inputPageWordHandle", this.params.hot_word_3.map(item=>{
							return {
								label: item,
								check: false
							}
						})
					);
					break;

				case "预警词":
					this.$store.commit("inputPageWordHandle", this.$refs.subjectWarn.params.custom_words.map(item=>{
							return {
								label: item,
								check: false
							}
						})
					);
					break;
				case "预警排除词":
					this.$store.commit("inputPageWordHandle", this.$refs.subjectWarn.params.custom_exclude.map(item=>{
							return {
								label: item,
								check: false
							}
						})
					);
					break;
			}
			this.$store.commit("isInputPageInAddHandle", true);
		},
		getWordData(data) {
			switch(data.type){
				case "上榜关键词一": 
					this.params.rank_word_1 = data.content.split(" ");
					break;
				case "上榜关键词二":
					this.params.rank_word_2 = data.content.split(" ");
					break;
				case "上榜关键词三":
					this.params.rank_word_3 = data.content.split(" ");
					break;
				case "预测热点关键词一": 
					this.params.hot_word_1 = data.content.split(" ");
					break;
				case "预测热点关键词二":
					this.params.hot_word_2 = data.content.split(" ");
					break;
				case "预测热点关键词三":
					this.params.hot_word_3 = data.content.split(" ");
					break;

				case "预警词":
					this.$refs.subjectWarn.params.custom_words = data.content.split(" ");
					break;
				case "预警排除词":
					this.$refs.subjectWarn.params.custom_exclude = data.content.split(" ");
					break;
			}
		},
		reset() {
			this.warningLevel = [
				{
					is_select: true,
					is_toggle: false,
					title: "央级媒体发布",
					alert_key: "top_public",
					major_warning: 1,
					serious_warning: "",
					general_warning: ""
				},
				{
					is_select: true,
					is_toggle: false,
					title: "热榜上榜",
					alert_key: "hot_rank",
					major_warning: 1,
					serious_warning: "",
					general_warning: ""
				},
				{
					is_select: true,
					is_toggle: false,
					title: "自媒体大V发布",
					alert_key: "self_media",
					major_warning: 100,
					serious_warning: 20,
					general_warning: 20
				},
				{
					is_select: false,
					is_toggle: false,
					title: "阅读量",
					alert_key: "read_count",
					major_warning: 30000,
					serious_warning: 10000,
					general_warning: 10000
				},
				{
					is_select: false,
					is_toggle: false,
					title: "评论量",
					alert_key: "comment_count",
					major_warning: 5000,
					serious_warning: 1000,
					general_warning: 1000
				},
				{
					is_select: false,
					is_toggle: false,
					title: "转发量",
					alert_key: "repost_count",
					major_warning: 5000,
					serious_warning: 1000,
					general_warning: 1000
				},
				{
					is_select: false,
					is_toggle: false,
					title: "点赞量",
					alert_key: "like_count",
					major_warning: 5000,
					serious_warning: 1000,
					general_warning: 1000
				},
				{
					is_select: false,
					is_toggle: false,
					title: "全网相似信息数",
					alert_key: "similar_count",
					major_warning: 2000,
					serious_warning: 1000,
					general_warning: 1000
				}
			];
		},
		save() {
			let data = {...this.params};
			let level = this.warningLevel.filter(item=>item.is_select);
			Object.keys(data).map(key=>{
				if(data[key] === true){
					data[key] = "t";
				}else if(data[key] === false){
					data[key] = "f";
				}
			});
			this.loading = true;
			warnEdit({...data,...level}).then(({code})=>{
				this.loading = false;
				if(code == 200){
					this.$refs.uToast.show({
						title: "设置成功",
						type: "success",
						callback: ()=>{
							uni.redirectTo({
								url: "/pages/warning/warning",
							});
						}
					});
				}
			});
		},
		subjectEdit(id) {
			this.subjectId = id;
			this.$store.state.isSubjectWarn = true;
		},
	}
}
</script>

<style lang="scss">
.navbar-slot{
	width: 100%;
	justify-content: center;
}
/deep/ .u-tab-item{
	margin: 0 15rpx;
}
.content{
	padding: 20rpx;
}
.content-1{
	padding: 20rpx 0;
	.toggle-row{
		margin-top: 20rpx;
		padding: 0 20rpx;
	}
}
.btns{
	padding: 20rpx;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	box-shadow: 0rpx -6rpx 30rpx 0rpx rgba(192, 192, 192, 0.3);
	background-color: #fff;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	.l{
		align-items: center;
		font-size: 28rpx;
	}
	.btn{
		margin: 0;
		margin-left: 20rpx;
	}
}
.toggle-row{
	margin-top: 30rpx;
	justify-content: space-between;
	.label{
		font-size: 30rpx;
	}
}
.wx{
	padding: 40rpx 20rpx;
	background-color: #F2F3F7;
	justify-content: space-between;
	margin-top: 40rpx;
	.label{
		font-size: 28rpx;
		line-height: 50rpx;
	}
	.icon{
		width: 50rpx;
		height: 50rpx;
		background: url(./../../static/qr-code.png) no-repeat center/contain;
	}
}
.wx-tip{
	text-align: center;
	font-weight: bold;
	margin-bottom: 40rpx;
}
.subjects{
	padding: 20rpx;
	.subjects-type{
		margin-top: 20rpx;
	}
	.subject-list{
		flex-wrap: wrap;
		margin-left: -10rpx;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #F0F0F0;
		.subject{
			padding: 10rpx 20rpx;
			border: 1rpx solid #F0F0F0;
			border-radius: 8rpx;
			margin: 0 10rpx 20rpx;
			justify-content: space-between;
			min-width: 100rpx;
		}
	}
}
.radio{
	width: 120rpx;
	padding: 10rpx 0;
	border-radius: 10rpx;
	box-sizing: border-box;
	border: 1rpx solid #F0F0F0;
	text-align: center;
	margin-left: 20rpx;
	margin-top: 20rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.on{
	border: 1rpx solid #1E62FC;
	background-color: #1E62FC;
	color: #fff;
}
.content-2{
	padding-bottom: 150rpx;
}
.content-3{
	padding: 20rpx 0;
	padding-bottom: 150rpx;
	.toggle-row{
		padding: 0 20rpx;
	}
	.tip{
		padding: 0 20rpx;
		font-size: 26rpx;
		line-height: 32rpx;
		color: #999;
		margin-top: 20rpx;
	}
	.check-box{
		border-top: 1rpx solid #F0F0F0;
		margin-top: 20rpx;
	}
	.check-row{
		padding: 20rpx;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #F0F0F0;
	}
	.check-con{
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F0F0F0;
		.check-con-row{
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #666;
			margin-top: 20rpx;
			.l{
				margin-left: 60rpx;
			}
			.r{
				align-items: center;
				margin-right: 40rpx;
				.input{
					text-align: right;
					width: 150rpx;
					margin: 0 10rpx;
				}
			}
		}
	}
}
.block{
	border-bottom: 1px solid #F0F0F0;
	&:first-child{
	}
	.box{
		margin: 10rpx 20rpx 30rpx;
		font-size: 30rpx;
		overflow-x: auto;
	}
	.title{
		font-size: 32rpx;
		line-height: 32rpx;
		padding: 30rpx 20rpx;
	}
	.red{
		color: #f50202;
	}
}
</style>
